<template>
  <div>
    <h1>根组件</h1>
    <label>
      <input type="radio" v-model="colorVal" value="red" name="color">
      红色
    </label>
    <label>
      <input type="radio" v-model="colorVal" value="pink" name="color">
      粉色
    </label>
    <label>
      <input type="radio" v-model="colorVal" value="yellow" name="color">
      黄色
    </label>
    <div class="box">

    </div>
  </div>
  <hr>
  <ProvideA/>
</template>

<script setup lang=ts>
import { provide, ref } from 'vue';
import ProvideA from '@/components/provide/ProvideA.vue';

const colorVal = ref<string>("red")

provide("color",colorVal)
  
</script>

<style scoped>
.box{
  height:100px;
  width:100px;
  background: v-bind(colorVal);
}
</style>